interface PointerHandler {
  getRertSite: () => { x: number; y: number };
  custom: (
    customHandler: (e: React.PointerEvent<HTMLCanvasElement>) => void
  ) => void;
}

const pointerHandler = (
  e: React.PointerEvent<HTMLCanvasElement>
): PointerHandler => {
  return {
    custom: (customHandler) => {
      customHandler(e);
    },
    getRertSite: () => {
      const { clientX, clientY } = e;
      const { left, top } = e.currentTarget.getBoundingClientRect();
      const x = clientX - left;
      const y = clientY - top;
      return { x, y };
    },
  };
};

export const inject = () => {
  window.__ph = pointerHandler;
};

export default pointerHandler;
